<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;list-style: none;}
			ul{margin:300px 0 0 30px;padding: 20px;border-radius:20px ;box-shadow: 0 0 10px #333;background: #E0FFFF;width: 500px;display: flex;justify-content: space-around;flex-wrap:wrap ;}
			li{padding: 10px;border-radius: 10px;border: 5px dashed #FFA500;margin: 5px;position: relative;}
			li img{width: 200px;display: block;}
			li p{text-align: center;font:700 20px/40px "";}
			button{margin: 0 20px;cursor: pointer;}
			div{width: 200px;height: 80px;border-radius: 20px;background: #FFDAB9;font: 700 40px/80px "";text-align: center;position: absolute;top: 150px;right: 50px;}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="../img/Akali.jpg" />
				<p><span>Akali</span><button>加入购物车</button></p>
			</li>
			<li>
				<img src="../img/Anivia.jpg" />
				<p><span>Anivia</span><button>加入购物车</button></p>
			</li>
			<li>
				<img src="../img/Brand.jpg" />
				<p><span>Brand</span><button>加入购物车</button></p>
			</li>
			<li>
				<img src="../img/LeeSin.jpg" />
				<p><span>LeeSin</span><button>加入购物车</button></p>
			</li>
		</ul>
		<div>购物车</div>
		<script>
			var ul = document.querySelector("ul")
			var lis = document.getElementsByTagName("li")
			var btns = document.getElementsByTagName("button")
			var imgs = ul.getElementsByTagName("img")
			var shopCar = document.querySelector("div")
			var targetX = shopCar.offsetLeft
			var targetY = shopCar.offsetTop
			var a = 0.0008
			for(var i =0;i<btns.length;i++){
				btns[i].index = i
				btns[i].onclick = function(){
					var originX = imgs[this.index].offsetLeft+lis[this.index].offsetLeft+5
					var originY = imgs[this.index].offsetTop+lis[this.index].offsetTop+5
					var copyImg = this.parentNode.parentNode.firstElementChild.cloneNode(true)
					ul.parentNode.appendChild(copyImg)
					copyImg.style.cssText = "opacity:0.4;position:absolute;width:200px;"
					copyImg.style.left = originX+"px"
					copyImg.style.top = originY+"px"
					var x = targetX - originX
					var y = targetY - originY
					var b = (y-a*x*x)/x
					var speedX = 0
					var wid = 5
					var timer = setInterval(function(){
						copyImg.style.width = 200-wid+"px"
						copyImg.style.left = originX+speedX + "px"
						copyImg.style.top =originY+(a*speedX*speedX+b*speedX)+"px"
						speedX += 10
						wid += 1.4
						console.log(parseInt(copyImg.style.left),targetX)
						if(parseInt(copyImg.style.left)>=targetX){
							copyImg.style.display = "none"
							clearInterval(timer)
						}
					},20)
				}
			}
		</script>
	</body>
</html>
